<template>
  <div class="container">
    <!-- 机构概括  今日数据
    <el-row :gutter="40">
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <div class="top">
            <h4>机构概括</h4>
          </div>
          <div class="bottom">
            <div>
              <p>{{ organOverview.organName }}</p>
              <p class="size">地址：{{ organOverview.organAddress }}</p>
              <p class="size">负责人：{{ organOverview.principal }} {{ organOverview.phone }}</p>
              <el-button style="width: 200px;" type="danger" @click="isShow = true"> 查看营业部分布</el-button>
              <img v-show="isShow" style="z-index: 9999; width: 800px; height: 600px; position: absolute; top: center; left: auto;" src="" alt="营业部分布" @dblclick="isShow=false">
            </div>
            <div class="pro">
              <div class="p">
                <p>分拣中心</p>
                <p class="color">{{ organOverview.sortingCenterNumber }}</p>
              </div>
              <div class="p">
                <p>营业部</p>
                <p class="color">{{ organOverview.agencyNumber }}</p>
              </div>
              <div class="p">
                <p>司机人数</p>
                <p class="color">{{ organOverview.driverNumber }}</p>
              </div>
              <div class="p">
                <p>快递员人数</p>
                <p class="color">{{ organOverview.courierNumber }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <div class="refresh-box">
            <h4>今日数据</h4>
            <p>{{ getChinaCurrentTime() }}</p>
          </div>
          <div class="refresh-botoom">
            <div class="tetitel">
              <div class="titel">
                订单金额（元）
              </div>
              <div class="moeny">
                {{ todayData.orderAmount }}
              </div>
              <div class="bijiao">
                较比昨日   {{ todayData.orderAmountChanges }}
              </div>
            </div>
            <div class="tetitel">
              <div class="titel">
                订单数量(笔)
              </div>
              <div class="moeny">
                {{ todayData.orderNumber }}
              </div>
              <div class="bijiao">
                较比昨日   {{ todayData.orderNumberChanges }}
              </div>
            </div>
            <div class="tetitel">
              <div class="titel">
                运输任务(次)
              </div>
              <div class="moeny">
                {{ todayData.transportTaskNumber }}
              </div>
              <div class="bijiao">
                较比昨日   {{ todayData.transportTaskNumberChanges }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row> -->

    <el-row :gutter="20">
      <!-- 机构概述 -->
      <el-col :span="14">
        <el-card class="institution">
          <p>机构概述</p>

          <div class="content">
            <div class="left-content">
              <div class="name">西三旗分拣中心</div>
              <div class="address">地址：北京顺义区天澜综合保税区123号</div>
              <div class="duty-people">负责人：赵五金 16712345678</div>
              <el-button type="primary" class="search-sales-department">查看营业部分布</el-button>
            </div>
            <div class="right-content">
              <div class="item">
                <div>
                  <div class="label">分拣中心(个)</div>
                  <div class="num">1</div>
                </div>
              </div>
              <div class="item">
                <div>
                  <div class="label">营业部(个)</div>
                  <div class="num">4</div>
                </div>
              </div>
              <div class="item">
                <div>
                  <div class="label">司机人数(个)</div>
                  <div class="num">48</div>
                </div>
              </div>
              <div class="item"><div><div class="label">快递员人数(个)</div>
                <div class="num">64</div>
              </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 今日数据 -->
      <el-col :span="10">
        <el-card class="right-info">
          <div class="headerone">
            <p>今日数据</p>
            <div class="refresh-box">
              2023-05-18 22:34
            </div>
          </div>
          <el-row span="24" class="row-bg">
            <el-col>
              <div class="label">订单金额(元)</div>
              <div id="my-number1" class="value">
                <count-to
                  :start-val="0"
                  :end-val="2284"
                  :duration="5000"
                />

              </div>
              <div class="bottom">较昨日 +342</div>
            </el-col>
            <el-col>
              <div class="label">订单数量(笔)</div>
              <div id="my-number2" class="value">
                <count-to
                  :start-val="0"
                  :end-val="193"
                  :duration="5000"
                />
              </div>
              <div class="bottom">较昨日 +27</div>
            </el-col>
            <el-col>
              <div class="label">运输任务(次)</div>
              <div id="my-number3" class="value">
                <count-to
                  :start-val="0"
                  :end-val="38"
                  :duration="5000"
                />
              </div>
              <div class="bottom">较昨日 +26</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待办任务  执行中任务-->
    <el-row :gutter="20">
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <div class="header">
            <div class="header-left">待办任务</div>
            <div class="header-right">{{ getChinaCurrentTime() }}</div>
          </div>
          <div class="main">
            <!-- //水晶球 -->
            <echaers-daiban :backlog="backlog" />
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <div class="header">
            <div class="header-left">执行中任务</div>
            <div class="header-right">{{ getChinaCurrentTime() }}</div>
          </div>
          <div class="main">
            <!-- //水晶球 -->
            <ball
              :backlog-percent="backlog.waitingPickupRate"
              :backlog-num="backlog.waitingPickupNumber"
              :border-color="'#e77e67'"
              :item-color="'#e35c3f'"
              :title="'运输中'"
              :bgc="'#ffe5e0'"
            />
            <ball
              :backlog-percent="backlog.waitingPickupRate"
              :backlog-num="backlog.waitingPickupNumber"
              :border-color="'#feca6e'"
              :item-color="'#ffda77'"
              :title="'运输中'"
              :bgc="'#fff1d9'"
            />
            <!-- <zhixing-echarts /> -->
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 代办任务 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-cont bg-purple">
          <div class="header">
            <div class="header-left">常用功能</div>
          </div>
          <div class="mm">
            <div class="mained">
              <img src="@/assets/img/home/carword1.png" class="img-icon">
              <p class="gl">快递作业</p>
            </div>
            <div class="mained">
              <img src="@/assets/img/home/carword2.png" class="img-icon">
              <p class="gl">运输任务</p>
            </div>
            <div class="mained">
              <img src="@/assets/img/home/carword3.png" class="img-icon">
              <p class="gl">路线管理</p>
            </div>
            <div class="mained">
              <img src="@/assets/img/home/carword4.png" class="img-icon">
              <p class="gl">车辆管理</p>
            </div>
            <div class="mained">
              <img src="@/assets/img/home/carword5.png" class="img-icon">
              <p class="gl">司机管理</p>
            </div>
            <div class="mained">
              <img src="@/assets/img/home/carword6.png" class="img-icon">
              <p class="gl">运费管理</p>
            </div>
          </div>

        </div>
      </el-col>
    </el-row>
    <!-- 大公鸡 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="header">
            <div class="header-left">路线管理</div>
          </div>
          <div class="cap">
            <china-cap />
          </div>
        </div>
      </el-col>
      <!-- 运输任务 -->
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="header">
            <div class="header-left">路线管理</div>
            <div class="look">查看更多<i class="el-icon-arrow-right" /></div>
          </div>
          <yunshu-element-ui :list="transportTaskList" class="form" />
        </div>
      </el-col>
    </el-row>
    <!-- 订单总量 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="header">
            <div class="header-left">订单总量</div>
            <div class="header-right">{{ getChinaCurrentTime() }}</div>
          </div>
          <div class="data">
            <span>
              <h3>

                <count-to
                  :start-val="0"
                  :end-val="74432"
                  :duration="10000"
                /></h3>
              <p>订单最高值</p>
            </span>
            <span>
              <h3>
                <count-to
                  :start-val="0"
                  :end-val="12244"
                  :duration="10000"
                /></h3>
              <p>订单平均值</p>
            </span>
            <span>
              <h3>
                <count-to
                  :start-val="0"
                  :end-val="30510"
                  :duration="10000"
                /></h3>
              <p>订单最低值</p>
            </span>
          </div>
          <div>
            <line-totol :order-line-chart="orderLineChart" />
          </div>

        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="header">
            <div class="header-left">订单分布</div>
            <div class="header-right">{{ getChinaCurrentTime() }}</div>
          </div>
          <div>
            <curve-data />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { workSpace } from '@/api/work'
import ChinaCap from './china/china-cap.vue'
import echaersDaiban from './daiban/echaers-daiban.vue'
import YunshuElementUi from './yunshurenwu/yunshu-element-ui.vue'
// import ZhixingEcharts from './zhixing/zhixing-echarts.vue'
import ball from '@/views/dashboard/Ball/index.vue'
// import LineTotol from './line/lineTotol.vue'
// import CurveData from './curve/CurveData.vue'
export default {
  components: { echaersDaiban, ChinaCap, YunshuElementUi, ball, CountTo },

  // , LineTotol, CurveData
  data() {
    return {
      // 控制营业部开关
      isShow: false,
      // 机构概括
      organOverview: [],
      // 不清楚的好多时间
      orderLineChart: [],
      // 今日数据
      todayData: [],
      // 不清楚
      backlog: [],
      // 路线管理
      transportTaskList: []

    }
  },
  created() {
    this.getWorkSpace()
    // console.log(this.getChinaCurrentTime())
  },
  methods: {
    async getWorkSpace() {
      const res = await workSpace()
      this.organOverview = res.data.organOverview
      this.orderLineChart = res.data.orderLineChart
      this.todayData = res.data.todayData
      this.backlog = res.data.backlog
      this.transportTaskList = res.data.transportTaskList
    },
    getChinaCurrentTime() {
      // 获取当前时间
      const date = new Date()
      // 转换时区为中国时区
      date.setHours(date.getHours() + 8)
      // 格式化输出
      const year = date.getFullYear().toString()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hour = date.getHours().toString().padStart(2, '0')
      const minute = date.getMinutes().toString().padStart(2, '0')
      const second = date.getSeconds().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    }
  }

}
</script>
<style lang="scss" scoped>
.line{
  height: 500px;
  width: 500px;
}
.data{
    display: flex;
    justify-content:space-evenly;
    margin-top: 38px;
    span{
      text-align: center;
      h3{
        color: #e15536;
        font-size: 28px;
        margin: 0 0 5px;
      }
      p{
        font-size: 12px;
        color: #818693;
      }
    }
  }

.form{
  margin-top: 30px;
  height: 500px;
}
.look{
  cursor: pointer
}
.cap{
  margin-top: 30px;
  height: 500px;
  width: 570px;
}
.color{
  color: rgb(255, 115, 0);
  font-size: 30px;
}
.mm{
  display: flex;
  justify-content: center;
}
.mained:hover{
  color: red;
}
.mained{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px;
  height: 130px;
  width: 220px;
  background-color: #fafafb;
  border-radius: 10px;
  cursor: pointer

}.img-icon{
  width: 50px;
  }
// .icon{
//     font-size: 50px;
//     // color: ;s
//   }
.main{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 30px;
  height: 300px;
}
.header{
  display: flex;
  padding: 4px;
  height: 26px;
  line-height: 26px;
  justify-content: space-between;
  .header-left{
    font-weight: 700;
    font-size: 16px;
  }
  .header-right{
    font-size: 12px;
    cursor: pointer;
  }
}

///
.refresh-botoom{
  width: 550px;
  height: 190px;
  padding: 60px;
  display: flex;
  align-items: center;
  .tetitel{
    padding: 0 15px;
  }
  .moeny{
    padding: 20px 0;
    font-size: 30px;
    font-weight: 700;
  }
}
.refresh-box{
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  p{
    text-align: center;
    padding: 8px;
    cursor: pointer;
  }
}
.top{
  height: 10px;
  line-height: 10px;
}

.container {
  margin: 0 auto;
  max-width: 100%;
  padding: 30px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #939ead;
  }
  .bg-purple {
    background: #fff;
    padding: 20px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 300px;
  }
  .grid-cont{
    border-radius: 4px;
    min-height: 150px;
  }

  p {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
}
// 机构概述
.institution {
  .content {
    position: relative;
    display: flex;
    .left-content {
      padding-left: 10px;
      flex: 50%;
      border-right: 1px solid #ebeef5;
      .name {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 13px;
      }
      .address {
        font-size: 14px;
        color: #818693;
        margin-bottom: 8px;
      }
      .duty-people {
        font-size: 14px;
        color: #818693;
        margin-bottom: 23px;
      }
      .search-sales-department {
        font-size: 14px;
        color: #e15536;
        width: 158px;
        height: 40px;
        background: #ffeeeb;
        border: 1px solid #f3917c;
        border-radius: 4px;
        cursor: pointer;
        &:hover {
          background-color: #ff6b4a;
          color: #fff;
        }
      }
    }
    .right-content {
      display: flex;
      flex: 50%;
      width: 300px;
      flex-wrap: wrap;
      // align-items: center;
      justify-content: center;
      .item {
        flex: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .label {
          font-size: 14px;
          margin-bottom: 10px;
        }
        .num {
          font-size: 32px;
          font-weight: 700;
          color: #e15536;
          cursor: pointer;
        }
        &:nth-child(2) {
          padding-right: 25px;
        }
      }
    }
  }
}
  //
  .right-info {
  .headerone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .refresh-box {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #818693;
      &::before {
        content: "";
        width: 15px;
        height: 14px;
        margin-right: 8px;
        background: url(~@/assets/img/home/layoutjiazaiicon.png) no-repeat;
        background-size: contain;
      }
    }
  }
  .row-bg {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
    padding-left: 10px;
    text-align: center;
    .label {
      margin-bottom: 21px;
      font-size: 14px;
      color: #20232a;
    }
    .value {
      margin-bottom: 24px;
      font-size: 36px;
      color: #20232a;
      font-weight: 700;
    }
    .bottom {
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
      padding-left: 9px;
      font-size: 14px;
      color: #818693;
      &::after {
        content: "";
        width: 15px;
        height: 15px;
        background: url(~@/assets/img/home/layoutjiantoicon.png) no-repeat;
        background-size: contain;
      }
    }
  }
}
</style>
